<template>
	<view class="flex">
		<scroll-view scroll-y="true" class="box1" :style="{height: scrollHeight+'rpx'}"  :scroll-into-view="toView">
			<view class="itemClass text-overflow" v-for="(item,index) in provinceList" :key="index"
				:class="{ 'selectedProvice': provinceIndex==index }"
				:id="'city-letter-' + (item.firstletter === '#' ? '0' : item.firstletter)"
				:style="{color:provinceIndex==index?selectedColor:''}" @click="selectProvince(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="box2" :style="{height: scrollHeight+'rpx'}">
			<view class="itemClass text-overflow" v-for="(item,index) in cityList" :key="index"
				:style="{color:cityIndex==index?selectedColor:''}" @click="selectCity(index)">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="box3" :style="{height: scrollHeight+'rpx'}" :class="{'bl':countyList.length>0}">
			<view class="itemClass01 text-overflow01" v-for="(item,index) in countyList" :key="index"
				:style="{color:countyIndex==index?selectedColor:''}"
				@click="selectCounty(index)">
				{{ item.name }}
			</view>
		</scroll-view>
		
		<!-- 城市选择索引-->
		<view class="city-indexs-view" v-if="show_indexs">
			<view class="city-indexs">
				<view v-for="(cityIns, index) in handleCity"  :key="index" @click="cityindex(cityIns.forName)">{{ cityIns.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cityData from './city.json';
	export default {
		name: "gjs-selectCity",
		props: {
			scrollHeight: {
				type: Number,
				default: 800
			},
			selectedColor: {
				type: String,
				default: "#FFCC32"
			}
		},
		data() {
			return {
				toView: 'city-letter-Find', //锚链接 初始值
				provinceIndex: -1,
				cityIndex: -1,
				countyIndex: -1,
				show_indexs : true,
				
	            handleCity: [], // 处理后的城市数据
				provinceList: [],
				cityList: [],
				countyList: []
			};
		},
		mounted() {
			//console.log(111)
			this.provinceList = this.vuex.appInfo.brands;
			this.initializationCity();
			// this.cityList = this.provinceList[this.provinceIndex].city
			// this.countyList = this.cityList[this.cityIndex].area
		},
		onLoad(){
			//console.log(222)
			
		},
		methods: {
			/**
			 * @desc 滑动到城市索引所在的地方
			 * @param id String 城市索引
			 */
			cityindex(id) {
				this.toView = id
				// //创建节点查询器
				// const query = uni.createSelectorQuery().in(this)
				// var that = this
				// that.scrollTop = 0
				// //滑动到指定位置(解决方法:重置到顶部，重新计算，影响:页面会闪一下)
				// setTimeout(() => {
				// 	query
				// 		.select('#city-letter-' + (id === '#' ? '0' : id))
				// 		.boundingClientRect(data => {
				// 			// console.log("得到布局位置信息" + JSON.stringify(data));
				// 			// console.log("节点离页面顶部的距离为" + data.top);
				// 			data ? (that.scrollTop = data.top) : void 0
				// 		})
				// 		.exec()
				// }, 0)
			},
			initializationCity() {
				this.handleCity = []
				const cityLetterArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#']
				for (let index = 0; index < cityLetterArr.length; index++) {
					this.handleCity.push({
						name: cityLetterArr[index],
						isCity: false, // 用于区分是否含有当前字母开头的城市
						citys: [], // 存放城市首字母含是此字母的数组
						forName: 'city-letter-' + cityLetterArr[index] //label的绑定
					})
				}
			},
			selectProvince(e) {
				this.provinceIndex = e
				let id = this.provinceList[e].id;
			    let url = this.site_url + 'api/index/get_series_by_brand?brand_id='+id;
			    this.areq(url).then(res=>{
					if(res.code == 1){
						  this.cityList = res.data;
						  this.countyList = [];
						  this.show_indexs = true;
					}
				})
			},
			selectCity(e) {
				this.cityIndex = e;
				//console.log(this.cityList[e])
				let city_id = this.cityList[e].id;
				 let url = this.site_url + 'api/index/get_info_by_series?series_id='+city_id;
				this.areq(url).then(res=>{
					if(res.code == 1){
						  this.show_indexs = false;
						  this.countyList = res.data;  
					}
				})
			
			},
			selectCounty(e) {
				this.countyIndex = e
			    let info = this.countyList[e];
			     //console.log(info);
				this.$emit('on_select', info)
				setTimeout(()=>{
					this.backTo();
				},300)
				
			}
		}
	}
</script>

<style lang="scss">
	@import url("./common.scss");
	//宽度转换vw
	@function vww($number) {
		@return ($number / 375) * 750 + rpx;
	}
	view {
		box-sizing: border-box;
	}

	.box1 {
		width: 160rpx;
		background-color: #F5F7F7;
	}
	
	.city-indexs-view {
		position: absolute;
		right: 30rpx;
		top: 0;
		z-index: 999;
		display: flex;
		width: vww(20);
		height: 100%;
		text-align: center;
	
		.city-indexs {
			width: vww(20);
			text-align: center;
			vertical-align: middle;
			align-self: center;
			> view {
				margin-bottom: vww(6);
				width: vww(20);
				font-size: 12px;
				color: #1E2128;
				font-weight: bold;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.box2 {
		width: 230rpx;
	}
	.bl {
		border-left: 1rpx solid #EEEEEE;
	}
	.box3 {
		width: calc(100% - 390rpx);
	}
	.itemClass {
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 20rpx;
		padding-right: 15rpx;
		font-size: 3.5vw;
	}
	.itemClass01 {
		line-height: 35rpx;
		padding-left: 20rpx;
		padding-right: 15rpx;
		font-size: 3.5vw;
		margin:4vw 0vw 4vw 0vw;
	}

	.selectedProvice {
		background-color: #FFFFFF;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
</style>
